<template>
	<view class="nav-content">
		<!-- 课程 / 我课 -->
		<view class="nav">
			<!-- 后退 -->
			<view class="left">
				<navigator open-type="switchTab" url="/pages/index/index"><i class="iconfont iconfanhui-copy"></i></navigator>
			</view>
			<view class="navTitle">
				<text v-for="(item,index) in currentList" :key="index" :class="[currentIndex == index ? 'name_active':'']" @tap="titleClick(index)">{{item}}</text>
			</view>
			<view class="right">
				<!-- <navigator hover-class="false" url=""><i class="iconfont icon-kefu-xian"></i></navigator> -->
				<!-- <navigator hover-class="false" url=""><i class="iconfont iconxuankedan"></i></navigator> -->
			</view>
		</view>
		<view class="search" :class="currentIndex == 1 ? 'search-bg':''">
			<!-- 搜索 -->
			<view @click="linkSearch">
				<uni-search-bar radius="100" clearButton="always" type="short" :class="'search-bar'"/>
			</view>
			<!-- 年级 -->
			<view class="search-grade" @tap="centerClick" :class="currentIndex == 1 ? 'search-grade-bg':''">
				<text style="width: max-content;">{{gradeNmae}}</text>
				<i class="iconfont iconxiala" v-if="canlist"></i>
			</view>
		</view>
		<!-- 年级 -->
		<view class="centerPop" v-if="centerIf">
			<view class="centerItem" v-for="(item,index) in grade_list" :key="index" @tap="centerItem(index,item.grade_name)" :class="centerIndex == index ? 'activeColor':''">{{item.grade_name}}</view>
		</view>
		
		<!-- 返回顶部 -->
		<view class="slideView"><i class="iconlessonfont icon-fanhuidingbu" @tap="slideTop"></i></view>
	</view>
</template>

<script>
	import utils from '@/common/util.js'
	// import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	import uniSearchBar from './lesson-search-bar.vue';
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				currentList: ['课程','我课'],
				gradeNmae: utils.getgradeName(uni.getStorageSync('userInfo').grade),
				centerIf: false,
				centerIndex: 0,
				canlist:true
			};
		},
		props: {
			currentIndex: Number,
			navList: Array,
			navIndex: Number,
			grade_list: Array,
		},
		watch: {
			grade_list(list) {
				for(var i = 0; i < this.grade_list.length; i++) {
					if(this.gradeNmae == this.grade_list[i].grade_name) {
						this.centerIndex = i;
					}
				}
			}
		},
		methods:{
			// 课程 / 我课 切换
			titleClick(index) {
				if(index == 0) {
					uni.navigateTo({
						url: '/pages/free-lesson/free-index'
					})
				} else if(index == 1) {
					uni.navigateTo({
						url: '/pages/classOrder/course-all'
					})
				}
			},
			// 跳转搜索页面
			linkSearch() {
				if(this.currentIndex == 1){
					return uni.navigateTo({
						url: '../free-lesson/history-search'
					})
				}
				uni.navigateTo({
					url: './history-search'
				})
			},
			
			// 年级点击
			centerClick() {
				this.centerIf = !this.centerIf;
			},
			// 年级选择
			centerItem(index,grade_name) {
				this.centerIndex = index;
				this.gradeNmae = this.grade_list[index].grade_name;
				this.centerIf = false;
				this.$emit('selectGrade',index) // 将选择的索引通知父组件
			},
			// 返回顶部
			slideTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			}
		}
	}
</script>

<style>
	@import url("../../../static/font_lesson/iconfont.css");
	/* 导航栏 */
	.nav-content {
		height: 248upx;
		font-family: Source Han Sans CN;
		width: 100%;
		z-index: 200;
	}
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 128upx;
		padding: 94upx 6upx 54upx;
		display: flex;
		overflow: hidden;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		color: #fff;
		background-color: #fe9900;
		transition-property: all;
		z-index: 99999;
	}
	.nav .iconfanhui-copy {
		margin-left: 20upx;
		font-size: 28upx;
		color: #FFFFFF;
	}
	.nav .left {
		display: inline-flex;
	}
	.navTitle {
		position: absolute;
		margin-left: calc(50% - 86upx);
	}
	.navTitle text {
		color: #FFFFFF;
		font-size: 28upx;
		padding: 5upx 10upx;
		border: 2upx solid #FFFFFF;
		background: #fe9900;
	}
	.navTitle text:first-child {
		padding-left: 16upx;
		border-radius: 8upx 0 0 8upx;
	}
	.navTitle text:last-child {
		padding-right: 16upx;
		border-radius: 0 8upx 8upx 0;
	}
	
	.name_active {
		color: #fe9900 !important;
		background: #FFFFFF !important;
		/* font-weight: bold; */
	}

	.right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.right .iconfont {
		color: #FFFFFF;
		font-size: 50upx;
		margin-right: 36upx;
	}
	.right text {
		margin: 0 30upx 0 20upx;
		color: #FFFFFF;
		font-size: 30upx;
	}
	
	/* 搜索栏 */
	.search{
		width: inherit;
		position: absolute;
		top: 128upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		padding-bottom: 20upx;
	}
	.search-bg{
		background: #fe9900;
	}
	.search-grade{
		margin: 30upx 30upx 0 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.search-grade text,
	.search-grade i{
		font-family:Source Han Sans CN;
		font-weight:400;
		line-height: 48upx;
		color: #333333;
		font-size: 28upx;
	}
	.search-grade i{
		padding-left: 12upx;
	}
	.search-grade-bg text,
	.search-grade-bg i{
		color: #FFF;
	}
	.search-bar {
		width: 616upx;
	}
	.centerPop{
		position: absolute;
		top: 248upx;
		right: 30upx;
		box-shadow: 0 12upx 12upx rgba(0,0,0,0.15);
		z-index: 1;
	}
	.centerItem{
		color: #666666;
		width: 140upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background-color: #FFFFFF;
	}
	.activeColor{
		color: #fe9900;
	}
	.slideView{
		width: 30upx;
		height: 30upx;
		background: #FFFFFF;
		position: fixed;
		z-index: 1;
		bottom: 56upx;
		right: 56upx;
	}
	.icon-fanhuidingbu{
		position: fixed;
		right: 30upx;
		bottom: 30upx;
		font-size: 80upx;
		color: #fe9900;
		line-height: 1;
	}
</style>
